<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
<p>Hello World!</p>
<button id="createTable">createTable</button>
<input type="number" id="rowNum" name="rowNum" value=10/>


<script type="text/javascript">
    function dropTable() {
        var tb = document.getElementsByTagName("table")[0];
        if (tb) {
            tb.parentNode.removeChild(tb);
        }
    }

    function deleteRow() {
        var tr = this.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    }

    function createTable() {
        dropTable();
        var row = document.getElementById("rowNum").value;
        // alert(rowNum);
        var table = document.createElement("table");
        for (var i = 0; i < row; i++) {
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            td1.innerHTML = i + "";
            td2.innerHTML = "avril" + i;
            var btn = document.createElement("button");
            btn.innerHTML = "delete";
            btn.onclick = deleteRow;

            td3.appendChild(btn);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            table.appendChild(tr);
        }
        document.body.appendChild(table);
    }
    window.onload = function () {
        var ct = document.getElementById("createTable");
        ct.onclick = createTable;
    }
</script>
</body>
</html>